<template>
	<view class="container" :style="{minHeight:$height()}">
		<view class="header">
			<view class="sale king-flex__between">
				<view class="sale-title">
					<image src="@/static/img/renrenshoudian.png" mode="widthFix"></image>
				</view>
				<button class="contact u-reset-button" style="margin:0px;" open-type="contact">
					<view class="round king-flex__center">
						<i class="iconfont">&#xeada;</i>
					</view>
				</button>
			</view>

			<view class="box king-flex" v-if="videoSwitch == 1">
				<view class="item king-flex__column king-align__center"
					@click="$next(`/pages/index/articleDetail?id=4`)">
					<image src="@/static/img/flw.png" mode="widthFix"></image>
					<text>操作流程</text>
				</view>
				<view class="item king-flex__column king-align__center"
					@click="$next(`/pages/functionCore/counter`,true)">
					<image src="@/static/img/counter.png" mode="widthFix"></image>
					<text>佣金计算</text>
				</view>
				<view class="item king-flex__column king-align__center" @click="$next(`/pages/index/classRoom`,true)">
					<image src="@/static/img/study.png" mode="widthFix"></image>
					<text>售电学习</text>
				</view>
				<view class="item king-flex__column king-align__center" @click="$next(`/pages/index/service`)">
					<image src="@/static/img/wiki.png" mode="widthFix"></image>
					<text>售电百科</text>
				</view>
				<view class="item king-flex__column king-align__center"
					@click="$next(`/pages/index/lvDianLvzhengLvShou`)">
					<image src="@/static/img/green.png" mode="widthFix"></image>
					<text>绿电绿证</text>
				</view>
				<view class="item king-flex__column king-align__center" @click="$next(`/pages/mine/promoted`)">
					<image src="@/static/img/promoted.png" mode="widthFix"></image>
					<text>我的推荐</text>
				</view>
				<view class="item king-flex__column king-align__center" @click="generatorQrCode">
					<image src="@/static/img/promotedEwm.png" mode="widthFix"></image>
					<text>售电推广</text>
				</view>
				<view class="item king-flex__column king-align__center" @click="$next(`/pages/mine/rank`)">
					<image src="@/static/img/rank.png" mode="widthFix"></image>
					<text>推广排名</text>
				</view>
				<view class="item king-flex__column king-align__center"
					@click="$next(`/pages/index/webView?url=${$utils.encryption('https://v2.zygyx.com/H5/#/pages/index/partner_join')}`)">
					<image src="@/static/img/promoted.png" mode="widthFix"></image>
					<text>合伙人招募</text>
				</view>
			</view>
		</view>

		<!-- 新闻 -->
		<view class="news-box">
			<text class="title">
				人人推荐
			</text>
			<view class="news king-flex__between">
				<view class="item king-flex__between" v-for="(item,index) in newsList" :key="index"
					@click="$next(`/pages/index/newsDetail?id=${item.id}`)">
					<view class="news-title u-line-1">
						{{item.title}}
					</view>
					<image src="@/static/img/news.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="banner" v-if="videoSwitch == 1">
				<u-swiper :list="bannerList" indicator indicatorMode="line" @click="banner" radius="0"
					circular></u-swiper>
			</view>
		</view>
		<view class="maps">
			<text class="title">客户池地图</text>
			<map id="myMap" style="width: 657rpx;height:432rpx;margin-top:20rpx;" :markers="covers" @labeltap="tap" @tap="tap"
				:enableScroll="false" scale="3" :enableZoom="false" latitude="37.20636435209224"
				longitude="104.42061851084236">
			</map>
		</view>
		<!-- 优势 -->
		<view class="adv" v-if="videoSwitch == 1">
			<text class="title">平台优势/介绍</text>
			<view class="images king-flex__between">
				<image :src="$utils.imagePath(`/upload/image/adv-left.png`)"
					@click="$next(`/pages/index/articleDetail?id=1`)" mode="widthFix"></image>
				<image :src="$utils.imagePath(`/upload/image/adv-right.png`)"
					@click="$next(`/pages/index/articleDetail?id=12`)" mode="widthFix"></image>
			</view>
		</view>

		<view class="quantity" v-if="videoSwitch == 1">
			<text class="title">实时电量</text>
			<view class="tips">
				<text class="tip">近半年月度签约电量（单位：万千瓦时）</text>
			</view>
			<view class="king-flex echarts">

				<charts-column style="width: 100%;" ref="tui_column_2" :tooltip="true" :xAxis="options2.xAxis"
					:dataset="options2.dataset" :max="options2.max" :splitNumber="options2.splitNumber"
					:xAxisVal="options2.xAxisVal" :legend="options2.legend">
				</charts-column>
			</view>
		</view>



		<view class="order-info" v-if="videoSwitch == 1">
			<text class="title">签约信息</text>
			<view class="order-box">
				<view class="king-flex">
					<text class="detail-title" style="width: 10%;">代理</text>
					<text class="detail-title" style="width: 50%;">签约电量(万千瓦时)</text>
					<text class="detail-title" style="width: 20%;">佣金(元)</text>
					<text class="detail-title" style="width: 20%;">时间</text>
				</view>
				<maoScroll :data="scroll.data" :showNum="scroll.showNum" :lineHeight="scroll.lineHeight"
					:animationScroll="scroll.animationScroll" :animation="scroll.animation">
				</maoScroll>
			</view>
		</view>

		<view class="counter" v-if="videoSwitch == 1">
			<text class="title">佣金计算</text>
			<view class="counter-box">
				<view class="counter-input king-flex king-flex__between">
					<text class="counter-title">签约电量</text>
					<text class="counter-pla">请输入电量（单位：万千瓦时）</text>
				</view>

				<u-line length="10" direction="col" />
				<view class="counter-input king-flex king-flex__between">
					<text class="counter-title">签约电价</text>
					<text class="counter-pla">请输入电价（单位：元/ 千瓦时）</text>
				</view>
				<view class="tip-title">温馨提示</view>
				<text class="tip-content">* 此计算不含个税部分，个税根据结算时的国家相关政策执行</text>
				<u-button type="primary" @click="$next(`/pages/functionCore/counter`,true)"
					color="#1A74E4">预估收益（1545.00元）</u-button>
			</view>
		</view>

		<view class="study-power" v-if="videoSwitch == 1">
			<text class="title">学习售电</text>
			<view class="study-box king-flex king-flex__between">
				<view class="study-item" @click="$next(`/pages/index/articleDetail?id=5`)">
					<image src="@/static/img/study1.png" mode="widthFix"></image>
				</view>
				<view class="study-item" @click="$next(`/pages/index/articleDetail?id=6`)">
					<image src="@/static/img/study2.png" mode="widthFix"></image>
				</view>
				<view class="study-item" @click="$next(`/pages/index/articleDetail?id=9`)">
					<image src="@/static/img/study3.png" mode="widthFix"></image>
				</view>
				<view class="study-item" @click="$next(`/pages/index/articleDetail?id=7`)">
					<image src="@/static/img/study4.png" mode="widthFix"></image>
				</view>
				<view class="study-item" @click="$next(`/pages/index/articleDetail?id=10`)">
					<image src="@/static/img/study5.png" mode="widthFix"></image>
				</view>
				<view class="study-item" @click="$next(`/pages/index/articleDetail?id=8`)">
					<image src="@/static/img/study6.png" mode="widthFix"></image>
				</view>
				<view class="study-item" @click="$next(`/pages/index/articleDetail?id=11`)">
					<image src="@/static/img/study7.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="case">
			<text class="title">案例学习</text>
			<view class="case-box">
				<view class="tap king-flex king-flex__between">
					<view @click="changeBillType(0)" :class="{active:billType == 0}" class="cate-type">
						<text>线索</text>
					</view>
					<view @click="changeBillType(1)" :class="{active:billType == 1}" class="cate-type">
						<text>资源</text>
					</view>
					<view @click="changeBillType(2)" :class="{active:billType == 2}" class="cate-type">
						<text>协助</text>
					</view>
					<view @click="changeBillType(3)" :class="{active:billType == 3}" class="cate-type">
						<text>直签</text>
					</view>
				</view>
				<u-line margin="34rpx 0rpx 34rpx 0rpx"></u-line>
				<view class="case-info" v-for="(item,index) in caseList" :key="index"
					@click="$next(`/pages/index/caseDetail?id=${item.id}`)">
					<view class="top king-flex__between">
						<view class="left king-flex">
							<i class="iconfont">&#xe76f;</i>
							<text class="name">{{item.cityName}}&nbsp;&nbsp;&nbsp; {{item.name}}</text>
						</view>
						<i class="iconfont">&#xe600;</i>
					</view>
					<view class="center u-line-1">
						{{item.title}}
					</view>
					<view class="content u-line-3">
						{{$utils.trimHtml(item.content)}}
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center">
			<image style="border-bottom: 1px solid #eaeaea;" :src="getImagePath()" mode="widthFix"></image>
			<view style="margin:5px auto;display: flex;justify-content: space-around;">
				<u-button size="mini" shape="square" type="primary" @click="saveFile()">保存图片</u-button>
				<u-button size="mini" shape="square" @click="copy()">复制推荐码</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import chartsColumn from '@/components/tui-charts-column/tui-charts-column.vue'
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue'
	export default {
		data() {
			return {
				bannerList: [],
				videoSwitch: 0,
				userinfo: uni.getStorageSync("userinfo"),
				show: false,
				scroll: {
					data: [],
					count: 30,
					showNum: 4,
					lineHeight: 60,
					animationScroll: 800,
					animation: 2000
				},
				caseList: [],
				commissionList: [],
				billType: 0,
				count: 0,
				covers: [{
					latitude: 37.20636435209224,
					longitude: 104.42061851084236,
					alpha: 0,
					label: {
						content: "已签约1500家",
						color: "#2E6ADF",
						fontSize: 24,
						anchorY: -25,
						textAlign: "center"
					},
				}],
				newsList: [],
				options2: {
					legend: {
						show: true
					},
					xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
					dataset: [{
						name: '月签约电量',
						color: '#2E6ADF',
						source: [],
						val: [],
					}],
					max: 600000,
					splitNumber: 120000,
					xAxisVal: {
						show: true,
						height: 60,
						color: '#EB0909',
						formatter: function(val) {
							return val
						}
					}
				},
			}
		},
		components: {
			chartsColumn,
			maoScroll
		},
		onLoad(options) {

			this.getBanner()
			this.powerCount()
			this.getCaseRes()
			this.getCommissionRes()
			this.getPersonsRecommend()

			let pid = decodeURIComponent(options.scene) == 'undefined' ? 0 : decodeURIComponent(options.scene)
			uni.setStorageSync("pid", pid)

		},
		onShow() {
			this.getVideoSwitch()
			this.countCustom()
		},
		methods: {
			getImagePath() {
				return `${this.$axios.interfaceUrl()}${this.$api.generatorQrCode}?user_id=${this.userinfo.id}`
			},
			generatorQrCode() {
				this.show = true
			},
			copy() {
				this.$axios.request(this.$api.getPromoteCode, "GET").then((val) => {
					uni.setClipboardData({
						data: `推荐码：${val.data}，售电推荐，与朋友分享机遇，让财富加速增长！`,
						success: function() {
							console.log('success');
						}
					});
				})

			},
			saveFile() {
				uni.getImageInfo({
					src: this.getImagePath(), //更换这个url就可以
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function(res) {
								uni.showModal({
									title: "保存成功",
									content: "图片已经在您的相册里啦",
									showCancel: false,
								});

							},
							fail(error) {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none",
								});
							},
						});
					},
					fail(error) {},
				});

			},
			countCustom() {
				this.$axios.request(this.$api.countCustom, "GET").then((val) => {
					let total = parseInt(val.data) + 2000
					this.covers[0].label.content = `已签约${total}家`

				})
			},
			getVideoSwitch() {
				this.$axios.request(this.$api.getParamsConfig, "GET", {
					config: "VIDEO_SWITCH"
				}).then((val) => {
					this.videoSwitch = val.data.paramValue
				})
			},
			getCaseRes() {
				this.$axios.request(this.$api.getCaseRes, "GET", {
					type: this.billType,
					page: 1,
					limit: 1,
					orderField: 'id',
					order: 'desc'
				}).then((val) => {
					this.caseList = val.data.list
				})
			},
			changeBillType(type) {
				this.billType = type
				this.getCaseRes()
			},
			// 获取人人推荐列表数据
			getPersonsRecommend() {
				this.$axios.request(this.$api.personsRecommend, "GET").then(res => {
					this.newsList = res.data
				})
			},
			getCommissionRes() {
				this.$axios.request(this.$api.getCommissionRes, "GET", {
					page: 1,
					limit: 20,
					orderField: 'id',
					type: 1,
					order: 'desc'
				}).then((val) => {
					this.commissionList = val.data.list
					setTimeout(() => {
						this.createData();
					}, 1000);
				})
			},
			tap() {
				let path = `/pages/functionCore/CustomerPoolMap/CustomerPoolMap`
				uni.setStorageSync("goPath", true)
				this.$axios.request(this.$api.getUser, "GET", {
					goPath: true
				}).then((val) => {
					uni.removeStorageSync("goPath")
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							if (res.latitude) {
								this.$next(
									`${path}?userid=${val.data.id}&latitude=${res.latitude}&longitude=${res.longitude}`,
									true)
							}
						},
						fail: (res) => {
							this.$next(
								`${path}?userid=${val.data.id}&latitude=31.3374923393393&longitude=120.97601494772528`,
								true)
						}
					})
				})
			},
			getBanner() {
				this.$axios.request(this.$api.getBannerRes, "GET").then((val) => {
					val.data.forEach((item) => {
						item.image = this.$axios.interfaceUrl() + item.image
					})
					this.bannerList = val.data
				})
			},
			// 跳转到banner页面
			banner(index) {
				this.$next(this.bannerList[index].path)
			},
			powerCount() {
				this.$axios.request(this.$api.powerCount, "GET").then((val) => {
					let month = []
					let monthData = []
					val.data.forEach(items => {
						month.push(items.month + '月')
						monthData.push(items.elNum)
					})
					this.options2.xAxis = month
					this.options2.dataset[0].source = monthData
					this.options2.dataset[0].val = monthData
					setTimeout(() => {
						this.$refs.tui_column_2.draw(this.options2.dataset, this.options2.xAxisVal
							.formatter)
					}, 500)


				})

			},
			createData() {
				for (let i = 1; i <= this.scroll.count; i++) {
					this.scroll.data.push(this.commissionList[i % this.commissionList.length])
				}


			},
			regionchange(e) {
				var myMap = uni.createMapContext("myMap", this)
				this.covers = []
				myMap.getCenterLocation({
					success: (res) => {
						this.viewLatitude = res.latitude
						this.viewLongitude = res.longitude
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #ECEEEE;
	}

	.header {
		background: #FFFFFF;
		padding: 47rpx;

		.sale {
			margin-bottom: 47rpx;
		}

		.sale-title {
			image {
				width: 355rpx;
			}
		}
	}

	.contact {
		.round {
			width: 75rpx;
			height: 75rpx;
			background: #ECEEEE;
			border-radius: 50%;

			i {
				font-size: 60rpx;
			}
		}
	}

	.box {
		flex-wrap: wrap;

		.item {
			width: 20%;

			image {
				width: 96rpx;
				height: 96rpx;
			}

			text {
				line-height: 30px;
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.news-box {
		background: #FFFFFF;
		padding: 47rpx;
		margin-top: 20rpx;

		.news {
			flex-wrap: wrap;

			.item {
				width: 49%;

				.news-title {
					flex: 8;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 33px;
				}

				image {
					flex: 2;
					width: 60rpx;
				}
			}
		}

	}

	.adv {
		background: #FFFFFF;
		padding: 47rpx;
		margin-top: 20rpx;

		.images {
			margin-top: 20rpx;

			image {
				width: 320rpx;
			}
		}

	}

	.quantity {
		background: #FFFFFF;
		padding: 47rpx;
		margin-top: 20rpx;

		.tip {
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
			line-height: 28px;
		}

		.echarts {
			width: 85%;
			margin-left: 15%;
			// height: 293rpx;
		}
	}

	.maps {
		background: #FFFFFF;
		padding: 47rpx;
		margin-top: 20rpx;
	}

	.order-info {
		background: #FFFFFF;
		padding: 47rpx;
		margin-top: 20rpx;

		.detail-title {
			font-size: 24rpx;
			font-weight: 600;
			color: #333333;
			line-height: 33px;
			text-align: center;
		}

		.order-box {
			background: #F3F5F8;
			padding: 10rpx;
			margin-top: 20rpx;
			border-radius: 18rpx;
		}
	}

	.counter {
		background: #FFFFFF;
		padding: 47rpx;
		margin-top: 20rpx;

		.counter-box {
			margin-top: 20rpx;
		}

		.counter-input {
			height: 81rpx;
			background: #F3F5F8;
			border-radius: 18rpx;
			padding: 0rpx 34rpx;
		}

		.counter-title {
			font-size: 26rpx;
			font-weight: 600;
			color: #333333;
			line-height: 81rpx;
		}

		.counter-pla {
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			line-height: 81rpx;
		}

		.tip-title {
			font-size: 24rpx;
			color: #333333;
			font-weight: 400;
			margin-top: 20rpx;
		}

		.tip-content {
			font-size: 24rpx;
			font-weight: 600;
			color: #F73E2C;
			line-height: 33px;
		}
	}

	.study-power {
		background: #FFFFFF;
		padding: 47rpx;
		margin-top: 20rpx;

		.study-box {
			margin-top: 20rpx;
			flex-wrap: wrap;
		}

		.study-item {
			width: 322rpx;
			margin-top: 10rpx;

			image {
				width: 100%;
			}
		}
	}

	.case {
		background: #FFFFFF;
		padding: 47rpx;
		margin-top: 20rpx;

		.case-box {
			margin-top: 20rpx;
		}

		.cate-type {
			width: 150rpx;
			height: 70rpx;

			background: #F3F5F8;
			border-radius: 40rpx;
			text-align: center;

			text {
				width: 52rpx;
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;
				line-height: 70rpx;
			}
		}

		.active {
			background: #d1e3f9;

			text {
				color: #1A74E4;
			}
		}

		.case-info {
			.top {
				.name {
					font-size: 24rpx;
					font-weight: 600;
					color: #333333;
					// line-height: 33px;
					margin-left: 10rpx;
				}
			}

			.center {
				font-size: 24rpx;
				font-weight: 600;
				color: #333333;
				line-height: 33px;
			}

			.content {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 33rpx;
			}
		}
	}


	/deep/ .tui-column__legend {
		position: absolute;
		right: 0px;
		top: -20px;
	}
</style>